import { RoutePath } from '@app/providers/router/config/routeConfig/routeConfig'
import { useI18n } from '@shared/lib/hooks/useI18n'
import { MenuItem, MenuSection } from '@shared/ui/MenuSection'

const mainMenuList: MenuItem[] = [
  { icon: 'home', title: 'dashboard', to: RoutePath.dashboard },
  { icon: 'task', title: 'tasks', to: RoutePath.task },
  { icon: 'folder', title: 'projects', to: RoutePath.projects },
  { icon: 'note_alt', title: 'notes', to: RoutePath.notes },
  { icon: 'calendar_month', title: 'calendar', to: RoutePath.calendar },
]

export const NavMenuSection = () => {
  const { languageLoaded, t } = useI18n('menu')
  const translatedMainMenuList = mainMenuList.map((menuItem) => ({
    ...menuItem,
    title: t(menuItem.title),
  }))

  return (
    <>
      <MenuSection isLoading={!languageLoaded} isNav menuList={translatedMainMenuList} />
    </>
  )
}

NavMenuSection.displayName = 'NavMenuSection'
